<template>
  <div class="login-box">
    <div class="container">
      <div class="left">
        <div class="left-content"></div>
      </div>

      <div class="right">
        <el-form
          ref="formInstance"
          :model="formData"
          label-position="left"
          :rules="roleRules"
          @submit.prevent
        >
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              maxlength="15"
              :disabled="loading"
              placeholder="请输入用户名"
            >
              <template #prefix>
                <el-icon>
                  <Person />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              :disabled="loading"
              type="password"
              maxlength="15"
              show-password
              placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon>
                  <LockClosed />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="padding-top: 20px" class="dark-btn">
            <el-button
              native-type="submit"
              round
              color="#27273a"
              :loading="loading"
              @click="login"
              >登&nbsp;&nbsp;录</el-button
            >
          </el-form-item>
        </el-form>
        <el-space justify="space-between" align="center">
          <el-checkbox v-model="isRemember">记住账号</el-checkbox>
          <el-button link>忘记密码</el-button>
        </el-space>
      </div>
    </div>
    <div class="footer"> 备案：1239018293 </div>
  </div>
</template>

<script lang="ts" setup name="LoginPage">
  import { onMounted, reactive, ref } from 'vue';
  import { login as loginApi } from '@/api/common';
  import { type FormRules, type FormInstance, ElMessage } from 'element-plus';
  import { setStorage, removeStorage, getStorage } from '@/utils/cache';
  import { useRouter } from 'vue-router';
  import useUserStore from '@/store/user';
  import { Person, LockClosed } from '@vicons/ionicons5';
  import { ACCOUNT_CATCH } from '@/constants/common';

  const router = useRouter();

  const formData = reactive<{
    username: string;
    password: string;
  }>({
    username: '',
    password: ''
  });

  const roleRules = reactive<FormRules>({
    username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
    password: [{ required: true, message: '请输入密码', trigger: 'change' }]
  });

  const formInstance = ref<FormInstance>();

  const loading = ref(false);

  const isRemember = ref(false);

  const userStore = useUserStore();

  const login = async () => {
    try {
      loading.value = true;
      await formInstance.value?.validate();
      const token = await loginApi(formData);
      setStorage('token', token);
      await userStore.getUserInfo();
      if (isRemember.value) {
        setStorage(ACCOUNT_CATCH, formData, 0);
      } else {
        removeStorage(ACCOUNT_CATCH);
      }
      ElMessage.success({
        message: '登录成功',
        duration: 1000,
        onClose() {
          loading.value = false;
          router.replace('/');
        }
      });
      return Promise.resolve();
    } catch (error) {
      return Promise.reject(error);
    } finally {
      loading.value = false;
    }
  };
  onMounted(() => {
    const rememberData = getStorage<{
      username: string;
      password: string;
    }>(ACCOUNT_CATCH);

    if (rememberData) {
      formData.password = rememberData.password;
      formData.username = rememberData.username;
      isRemember.value = true;
    }
  });
</script>

<style scoped lang="less">
  @base-bg-color: #1f1d27;
  @dark-bg-color: #27273a;
  @ball-color: #343041;

  @keyframes moveInLeft {
    0% {
      opacity: 0;
      transform: translateX(-400px);
    }
    100% {
      opacity: 1;
      transform: translate(-100px);
    }
  }
  @keyframes flyFromTop {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
  @keyframes flyFromBottom {
    0% {
      opacity: 0;
      transform: translate(50%, 50%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translate(50%, 50%);
    }
  }
  .login-box {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: @base-bg-color;
    &::before,
    &::after {
      content: ' ';
      display: block;
      position: fixed;
      background-color: @ball-color;
      width: 2200px;
      height: 600px;
      border-radius: 100%;
      z-index: 1;
    }
    &::before {
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      animation: flyFromTop 300ms ease-out forwards;
    }
    &::after {
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
      animation: flyFromBottom 300ms ease-out forwards;
    }
    .container {
      display: flex;
      flex-direction: row;
      align-items: center;
      z-index: 2;

      --el-color-primary: #595977;
      --el-color-primary-hover: #364cad;

      .left {
        width: 450px;
        height: 440px;
        border-radius: 8px 0 0 8px;
        position: relative;
        overflow: hidden;
        .left-content {
          position: absolute;
          background-color: @dark-bg-color;
          left: 0;
          top: 0;
          width: 310px;
          height: 100%;
          z-index: 4;
        }
        &::after {
          content: ' ';
          display: block;
          position: fixed;
          background-color: @dark-bg-color;
          box-shadow: 0 0 8px 2px darken(@dark-bg-color, 10%);
          width: 500px;
          height: 500px;
          border-radius: 100%;
          position: absolute;
          z-index: 3;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
        }
      }
      .right {
        background-color: #fff;
        height: 300px;
        width: 300px;
        padding: 80px 60px 0 160px;
        transform: translateX(-100px);
        border-radius: 0px 8px 8px 0;

        animation: moveInLeft 300ms ease-out forwards;
        .title {
          padding-top: 40px;
          margin-bottom: 40px;
          text-align: center;
          font-size: 28px;
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 15px;
      left: 0;
      right: 0;
      text-align: center;
      color: #fff;
      z-index: 999;
    }
  }
</style>
